﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="${ctx}/common/common.css" media="all">
    <script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>
    
</head>
<body>
<!--主体内容层-->
				<div class="layui-body" id="LAY_app_body">

					<!--主体内容层-->
					<div class="layui-fluid">

						<div class="layui-row layui-col-space15">

							<form class="layui-form" action="">
								<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
									<legend>表单集合</legend>
								</fieldset>
								<div class="layui-form-item">
									<label class="layui-form-label">长输入框</label>
									<div class="layui-input-block">
										<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<div class="layui-inline">
										<label class="layui-form-label">短输入框</label>
										<div class="layui-input-inline">
											<input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
										</div>
									</div>
									<div class="layui-inline">
										<label class="layui-form-label">验证日期</label>
										<div class="layui-input-inline">
											<input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
										</div>
									</div>
									<div class="layui-inline">
										<label class="layui-form-label">验证链接</label>
										<div class="layui-input-inline">
											<input type="tel" name="url" lay-verify="url" autocomplete="off" class="layui-input">
										</div>
									</div>
								</div>
								<div class="layui-form-item">
									<div class="layui-inline">
										<label class="layui-form-label">范围</label>
										<div class="layui-input-inline" style="width: 100px;">
											<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
										</div>
										<div class="layui-form-mid">-</div>
										<div class="layui-input-inline" style="width: 100px;">
											<input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
										</div>
									</div>
								</div>
								<div class="layui-form-item layui-form-text">
									<label class="layui-form-label">普通文本域</label>
									<div class="layui-input-block">
										<textarea placeholder="请输入内容" class="layui-textarea"></textarea>
									</div>
								</div>
								
								<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
									<legend>选择日期集合</legend>
								</fieldset>
								
								<div class="layui-form">
								  <div class="layui-form-item">
								    <div class="layui-inline">
								      <label class="layui-form-label">日期范围</label>
								      <div class="layui-input-inline">
								        <input type="text" class="layui-input" id="test6" placeholder=" - ">
								      </div>
								    </div>
								    <div class="layui-inline">
								      <label class="layui-form-label">年范围</label>
								      <div class="layui-input-inline">
								        <input type="text" class="layui-input" id="test7" placeholder=" - ">
								      </div>
								    </div>
								    <div class="layui-inline">
								      <label class="layui-form-label">年月范围</label>
								      <div class="layui-input-inline">
								        <input type="text" class="layui-input" id="test8" placeholder=" - ">
								      </div>
								    </div>
								  </div>
								</div>
								<div class="layui-from">
									<div class="layui-form-item">
										<div class="layui-inline">
								      <label class="layui-form-label">时间范围</label>
								      <div class="layui-input-inline">
								        <input type="text" class="layui-input" id="test9" placeholder=" - ">
								      </div>
								    </div>
								    <div class="layui-inline">
								      <label class="layui-form-label">时间范围</label>
								      <div class="layui-input-inline">
								        <input type="text" class="layui-input" id="test10" placeholder=" - ">
								      </div>
								    </div>										
									</div>

								</div>
								<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
									<legend>选择框集合</legend>
								</fieldset>
								<div class="layui-form-item">
									<label class="layui-form-label">单行选择框</label>
									<div class="layui-input-block">
										<select name="interest" lay-filter="aihao">
											<option value=""></option>
											<option value="0">写作</option>
											<option value="1" selected="">阅读</option>
											<option value="2">游戏</option>
											<option value="3">音乐</option>
											<option value="4">旅行</option>
										</select>
									</div>
								</div>
								<div class="layui-form-item">
									<div class="layui-inline">
										<label class="layui-form-label">分组选择框</label>
										<div class="layui-input-inline">
											<select name="quiz">
												<option value="">请选择问题</option>
												<optgroup label="城市记忆">
													<option value="你工作的第一个城市">你工作的第一个城市</option>
												</optgroup>
												<optgroup label="学生时代">
													<option value="你的工号">你的工号</option>
													<option value="你最喜欢的老师">你最喜欢的老师</option>
												</optgroup>
											</select>
										</div>
									</div>
									<div class="layui-inline">
										<label class="layui-form-label">搜索选择框</label>
										<div class="layui-input-inline">
											<select name="modules" lay-verify="required" lay-search="">
												<option value="">直接选择或搜索选择</option>
												<option value="1">layer</option>
												<option value="2">form</option>
												<option value="3">layim</option>
												<option value="4">element</option>
												<option value="5">laytpl</option>
											</select>
										</div>
									</div>
								</div>

								<div class="layui-form-item">
									<label class="layui-form-label">联动选择框</label>
									<div class="layui-input-inline">
										<select name="quiz1">
											<option value="">请选择省</option>
											<option value="浙江" selected="">浙江省</option>
											<option value="你的工号">江西省</option>
											<option value="你最喜欢的老师">福建省</option>
										</select>
									</div>
									<div class="layui-input-inline">
										<select name="quiz2">
											<option value="">请选择市</option>
											<option value="杭州">杭州</option>
											<option value="宁波" disabled="">宁波</option>
											<option value="温州">温州</option>
											<option value="温州">台州</option>
											<option value="温州">绍兴</option>
										</select>
									</div>
									<div class="layui-input-inline">
										<select name="quiz3">
											<option value="">请选择县/区</option>
											<option value="西湖区">西湖区</option>
											<option value="余杭区">余杭区</option>
											<option value="拱墅区">临安市</option>
										</select>
									</div>
								</div>
								<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
									<legend>表单按钮集合</legend>
								</fieldset>

								<div class="layui-form-item">
									<label class="layui-form-label">复选框</label>
									<div class="layui-input-block">
										<input type="checkbox" name="like[write]" title="写作">
										<input type="checkbox" name="like[read]" title="阅读" checked="">
										<input type="checkbox" name="like[game]" title="游戏">
									</div>
								</div>

								<div class="layui-form-item" pane="">
									<label class="layui-form-label">原始复选框</label>
									<div class="layui-input-block">
										<input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked="">
										<input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
										<input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled="">
									</div>
								</div>

								<div class="layui-form-item">
									<label class="layui-form-label">开关-默认关</label>
									<div class="layui-input-block">
										<input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">开关-默认开</label>
									<div class="layui-input-block">
											<input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">单选框</label>
									<div class="layui-input-block">
										<input type="radio" name="sex" value="男" title="男" checked="">
										<input type="radio" name="sex" value="女" title="女">
										<input type="radio" name="sex" value="禁" title="禁用" disabled="">
									</div>
								</div>
								<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
									<legend>按钮/弹窗集合</legend>
								</fieldset>
								<div class="layui-form-item">
									<div class="layui-btn-group">
								    <button class="layui-btn layui-btn-sm" ><i class="layui-icon"></i></button>
								    <button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
								    <button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
								    <button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
								  </div>
								</div>
								<div class="layui-form-item">
									    <button class="layui-btn">默认按钮</button>
									    <button class="layui-btn layui-btn-primary">重置按钮</button>
									    <button class="layui-btn layui-btn-danger">警告按钮</button>
									    <button class="layui-btn layui-btn-disabled">禁用按钮</button>
 											<button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
								</div>
								
							</form>
						</div>
					</div>
				</div>
				
				
		<script>			
					
					layui.use(['form', 'layedit', 'laydate'], function() {
						var form = layui.form,
							layer = layui.layer,
							layedit = layui.layedit,
							laydate = layui.laydate;

						//日期
						laydate.render({
							elem: '#date'
						});
						//创建一个编辑器
						var editIndex = layedit.build('LAY_demo_editor');

						//自定义验证规则
						form.verify({
							title: function(value) {
								if(value.length < 5) {
									return '标题至少得5个字符啊 ';
								}
							},
							pass: [/(.+){6,12}$/, '密码必须6到12位'],
							content: function(value) {
								layedit.sync(editIndex);
							}
						});

						//监听指定开关
						form.on('switch(switchTest)', function(data) {
							layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
								offset: '6px'
							});
							layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
						});

						//监听提交
						form.on('submit(demo1)', function(data) {
							layer.alert(JSON.stringify(data.field), {
								title: '最终的提交信息'
							})
							return false;
						});

					});
					
					
				
layui.use('laydate', function(){
  var laydate = layui.laydate;
  //日期范围
  laydate.render({
    elem: '#test6'
    ,range: true
  });
  
  //年范围
  laydate.render({
    elem: '#test7'
    ,type: 'year'
    ,range: true
  });
  
  //年月范围
  laydate.render({
    elem: '#test8'
    ,type: 'month'
    ,range: true
  });
  
  //时间范围
  laydate.render({
    elem: '#test9'
    ,type: 'time'
    ,range: true
  });
  
  //日期时间范围
  laydate.render({
    elem: '#test10'
    ,type: 'datetime'
    ,range: true
  });
  //直接嵌套显示
  laydate.render({
    elem: '#test-n1'
    ,position: 'static'
  });
  laydate.render({
    elem: '#test-n2'
    ,position: 'static'
    ,lang: 'en'
  });
  laydate.render({
    elem: '#test-n3'
    ,type: 'month'
    ,position: 'static'
  });
  laydate.render({
    elem: '#test-n4'
    ,type: 'time'
    ,position: 'static'
  });
});
				</script>
</html>

